<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue";
import ModuleCard from "../../../components/ModuleCard.vue";
import TabCard from "../../../components/TabCard.vue";
import OssTable from "../../../components/OssTable.vue";
import VideoSetting from "@/components/VideoSetting.vue";
import ScreenshotSet from "@/components/ScreenshotSet.vue";

export default defineComponent({
  components: {
    ModuleCard,
    TabCard,
    OssTable,
    VideoSetting,
    ScreenshotSet,
  },
  setup() {
    const state = reactive({
      currentTab: -1,
    });

    const handleTabCurrentChange = (e) => {
      state.currentTab = e;
    };

    return {
      ...toRefs(state),
      handleTabCurrentChange,
    };
  },
});
</script>

<template>
  <div class="oss-container">
    <tab-card
      :tabs="['录像计划', '抓图设置', '存储管理']"
      :default-index="0"
      @changeIndex="handleTabCurrentChange"
    >
      <template v-if="currentTab === 0">
        <video-setting />
      </template>
      <template v-if="currentTab === 1">
        <screenshot-set></screenshot-set>
      </template>
      <template v-if="currentTab === 2">
        <oss-table />
      </template>
    </tab-card>
  </div>
</template>

<style lang="scss">
.oss-container {
  height: 100%;
}
</style>
